<template>
  <div class="pt-[20px]">
    <CustomTitle title="故障统计"></CustomTitle>
    <div class="w-[770px] h-[300px] bg-[#1B1B1B] mt-[10px] rounded-[10px] flex items-center">
      <PieCharts width="700" height="250" ref="chartsRef" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { iDeviceStatistic } from '@/interface/iDeviceStatistic';

const props = defineProps<{ data: iDeviceStatistic['error'] }>();
const chartsRef = ref();

watch(
  () => props.data,
  val => {
    if (val) {
      const option: echarts.EChartsOption = chartsRef.value.getOptions();
 
      (option.legend as any) = {
        top: '0',
        right: '5%',
        orient: 'vertical',
        textStyle: {
          color: '#fff',
        },
      };
      (option.series as any)![0].data = [
        {
          name: `报警  ${val.warning}`,
          value: val.warning,
        },
        {
          name: `正常  ${val.normal}`,
          value: val.normal,
        },
      ];
      // (option.legend as any) = { show: false };
      (option.series as any)![0].radius = '70%';
      // (option.series as any)![0].roseType = 'radius';
      (option.series as any)![0].itemStyle = {
        normal: {
          color: function (colors: any) {
            var colorList = ['#F83253', '#E6E6E6'];
            return colorList[colors.dataIndex];
          },
        },
      };
      (option.series as any)![0].left = '-10%';
      (option.series as any)![0].label = {
        show: true,
        color: 'white',
        formatter: '{d}% {b}',
      };

      chartsRef.value.setOptions(option);
    }
  }
);
</script>
<style lang="scss" scoped></style>
